<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 商品列表
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>


        <div class="container">


            <el-form :inline="true" :model="form1"  v-if="hasPermission('orderform:select')">
                <el-form-item label="订单号">
                    <el-input placeholder="订单号" v-model="form1.orderFormNumber"></el-input>
                </el-form-item>
                <el-form-item label="支付方式">
                    <el-select v-model="form1.orderFormPayType">
                        <el-option label="支付宝" :value="1"></el-option>
                        <el-option label="微信" :value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="支付状态">
                    <el-select v-model="form1.orderFormStatus">
                        <el-option label="未支付" :value="0"></el-option>
                        <el-option label="已支付" :value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="search">搜索</el-button>
                </el-form-item>
            </el-form>

            <el-table
                    :data="orderForms.filter(orderForm=>orderForm.isDeleted===0)"
                    border
                    class="table"
                    ref="multipleTable"
                    header-cell-class-name="table-header"
                    v-if="hasPermission('orderform:select')"

            >
                <el-table-column label="ID" width="55" align="center">
                    <template slot-scope="scope">
                        {{scope.row.orderFormId}}
                    </template>
                </el-table-column>
                <el-table-column label="订单号">
                    <template slot-scope="scope">
                        {{scope.row.orderFormNumber}}
                    </template>
                </el-table-column>

                <el-table-column label="提交时间">
                    <template slot-scope="scope">
                        {{scope.row.gmtCreated}}
                    </template>
                </el-table-column>
                <el-table-column label="用户ID">
                    <template slot-scope="scope">
                        {{scope.row.userId}}
                    </template>
                </el-table-column>
                <el-table-column label="订单金额">
                    <template slot-scope="scope">
                        <span>{{scope.row.orderFormPrice}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="支付方式">
                    <template slot-scope="scope">

                        <span v-if="scope.row.orderFormPayType===1">支付宝</span>
                        <span v-if="scope.row.orderFormPayType===2">微信</span>
                    </template>
                </el-table-column>
                <el-table-column label="是否支付">
                    <template slot-scope="scope">

                        <span v-if="scope.row.orderFormStatus===0">未付款</span>
                        <span v-if="scope.row.orderFormStatus===1">已付款</span>
                    </template>
                </el-table-column>


                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">

                        <router-link :to="`orderformDetail?orderFormId=${scope.row.orderFormId}`" style="color: #07c4a8" v-if="hasPermission('orderform:select')">查看订单</router-link>


                        <el-button
                                type="text"
                                icon="el-icon-delete"
                                style="color: red"
                                class="red"
                                @click="deleteOrderForm(scope.row.orderFormId)"
                                v-if="hasPermission('orderform:delete')"
                        >删除
                        </el-button>
                    </template>


                </el-table-column>
            </el-table>

            <div class="pagination">
                <el-pagination
                        background
                        layout="total, prev, pager, next"
                        :current-page="pageNum"
                        :page-size="8"
                        :total="total"
                        @current-change="handlePageChange"
                        v-if="hasPermission('orderform:select')"
                ></el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    import { hasMenu, hasPermission, permissionListContain } from '../../utils/authority';
    import { doGoods } from '../../api/goods';
    import { deleteOrderForm, getOrderForm } from '../../api/orderform';

    export default {
        name: 'OrderForm',

        created() {
            this.fetchData(1);
        },
        data() {
            return {
                orderForms: [],
                total: 0,
                pageNum: 1,
                form1: {
                    orderFormStatus: null,
                    orderFormPayType: null,
                    orderFormNumber: null
                }
            };
        },
        methods: {
            handlePageChange(pageNum) {
                this.fetchData(pageNum);
            },
            permissionContain(permissionList) {
                return permissionListContain(permissionList);
            },
            hasPermission(permission) {
                return hasPermission(permission);
            },
            hasMenu(menuCode) {
                return hasMenu(menuCode);
            },
            goodsChange(goodsId, isDeleted) {
                doGoods({
                    goodsId: goodsId,
                    isDeleted: isDeleted
                });
            },

            search() {
                getOrderForm(this.form1).then(res => {
                    this.orderForms = res.data.data.list;
                    this.total = res.data.data.total;
                });
            },
            fetchData(pageNum) {
                getOrderForm({
                    pageNum: pageNum
                }).then(res => {
                    this.orderForms = res.data.data.list;
                    this.total = res.data.data.total;
                });
            },
            deleteOrderForm(orderFormId) {
                // 二次确认删除
                this.$confirm('确定要删除吗？', '提示', {
                    type: 'warning'
                })
                    .then(() => {
                        deleteOrderForm({
                            orderFormId: orderFormId
                        }).then(res => {
                            if (res.data.resultCode === 204) {
                                this.$message.success('删除成功');
                            } else {
                                this.$message.error('删除失败');
                            }
                        });
                    })
                    .catch(() => {
                    });

            }
        }
    };
</script>

<style scoped>

</style>
